<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>register</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="robots" content="all,follow">
	<link rel="icon" type="image/x-icon" href="/static/assets/favicon.ico" />
	<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
	<link rel="stylesheet" href="/static/css/style.default.css" id="theme-stylesheet">
</head>

<body>
	<div class="page login-page">
		<div class="container d-flex align-items-center">
			<div class="form-holder has-shadow">
				<div class="row">
					<!-- Logo & Information Panel-->
					<div class="col-lg-6">
						<div class="info d-flex align-items-center"
							style="background-image: url( /static/img/R-C.jpg);">
							<div class="content">
								<div class="logo">
									<h1>欢迎注册</h1>
								</div>
								<p>{{ blogname }}个人博客</p>
							</div>
						</div>
					</div>
					<!-- Form Panel    -->
					<div class="col-lg-6 bg-white">
						<div class="form d-flex align-items-center">
							<div class="content">
								<div class="form-group">
									<input id="register-userid" class="input-material" type="text" name="registeruserid"
										placeholder="账号">
									<div class="invalid-feedback">
										用户名必须在2~10位之间
									</div>
								</div>
								<div class="form-group">
									<input id="register-username" class="input-material" type="text"
										name="registerUsername" placeholder="请输入用户名">
									<div class="invalid-feedback">
										用户名必须在2~10位之间
									</div>
								</div>
								<div class="form-group">
									<input id="register-password" class="input-material" type="password"
										name="registerPassword" placeholder="请输入密码">
									<div class="invalid-feedback">
										密码必须在6~10位之间
									</div>
								</div>
								<div class="form-group">
									<input id="register-passwords" class="input-material" type="password"
										name="registerPasswords" placeholder="确认密码">
									<div class="invalid-feedback">
										两次密码必须相同 且在6~10位之间
									</div>
								</div>
								<div class="form-group">
									<button id="regbtn" type="button" name="registerSubmit"
										class="btn btn-primary">注册</button>
								</div>
								<small>已有账号?</small><a href="login" class="signup">&nbsp;登录</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- JavaScript files-->
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>
	<script>
		$(function () {
			/*错误class  form-control is-invalid
			正确class  form-control is-valid*/
			var flagName = false;
			var flagPas = false;
			var flagPass = false;
			/*验证用户名*/
			var name, passWord, passWords;
			$("#register-userid").change(function () {
				name = $("#register-userid").val();
				if (name.length < 3 || name.length > 10) {
					$("#register-userid").removeClass("form-control is-valid")
					$("#register-userid").addClass("form-control is-invalid");
					flagName = false;
				} else {
					$("#register-userid").removeClass("form-control is-invalid")
					$("#register-userid").addClass("form-control is-valid");
					flagName = true;
				}
			})
			/*验证密码*/
			$("#register-password").change(function () {
				passWord = $("#register-password").val();
				if (passWord.length < 6 || passWord.length > 18) {
					$("#register-password").removeClass("form-control is-valid")
					$("#register-password").addClass("form-control is-invalid");
					flagPas = false;
				} else {
					$("#register-password").removeClass("form-control is-invalid")
					$("#register-password").addClass("form-control is-valid");
					flagPas = true;
				}
			})
			/*验证确认密码*/
			$("#register-passwords").change(function () {
				passWords = $("#register-passwords").val();
				if ((passWord != passWords) || (passWords.length < 6 || passWords.length > 18)) {
					$("#register-passwords").removeClass("form-control is-valid")
					$("#register-passwords").addClass("form-control is-invalid");
					flagPass = false;
				} else {
					$("#register-passwords").removeClass("form-control is-invalid")
					$("#register-passwords").addClass("form-control is-valid");
					flagPass = true;
				}
			})


			$("#regbtn").click(function () {
				if (flagName && flagPas && flagPass) {
					localStorage.setItem("name", name);
					localStorage.setItem("passWord", passWord);
				} else {
					if (!flagName) {
						$("#register-userid").addClass("form-control is-invalid");
					}
					if (!flagPas) {
						$("#register-password").addClass("form-control is-invalid");
					}
					if (!flagPass) {
						$("#register-passwords").addClass("form-control is-invalid");
					}
				}
				$.ajax({
					type: "post",
					url: "http://127.0.0.1:52273/user/register",
					data: JSON.stringify({
						"UserId": $("#register-userid").val(),
						"Password": $("#register-password").val(),
						"UserName": $("#register-username").val()
					}),
					contentType: "application/json",
					dataType: "json",
					success: function (res) {
						if (res.code == 200) {
							console.log(res);
							location.href = res.index_html
						} else {
							alert(res.message)
						}

					}
				});
			})
		})
	</script>
</body>

</html>